<template>
  <view class="history-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <u-tabs
        :list="tabList"
        :current="currentTab"
        @change="handleTabChange"
        lineColor="#2979ff"
      ></u-tabs>
    </view>

    <!-- 历史列表 -->
    <scroll-view
      scroll-y
      class="list-container"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="refreshData"
    >
      <!-- 空状态 -->
      <u-empty
        v-if="list.length === 0 && !loading"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
      ></u-empty>

      <!-- 历史记录列表 -->
      <view v-else class="history-list">
        <view
          v-for="i in list"
          :key="i.FeedbackID"
          class="rounded-4px text-first text-14px p-10px bg-white rounded-[10px]"
          style="border-bottom: 1px #ccc solid"
        >
          <view>联系方式：{{ i.Contact }}</view>
          <view class="mt-10px">
            状态：
            <text>{{ i.Status }}</text>
          </view>
          <view class="mt-10px">时间：{{ i.CreateTime }}</view>
          <view class="mt-10px" style="line-height: 18px">
            内容：{{ i.Content || '-' }}
          </view>
          <view class="mt-10px flex items-center" style="line-height: 18px">
            <text>回复：{{ i.ReplyContent || '-' }}</text>
            <u-input
              v-if="i.Status === 'pending' && userInfo.Permission === 'admin'"
              v-model="i.ReplyContents"
              :border="false"
              placeholder="请输入回复内容"
              class="mx-[10px]"
            ></u-input>
            <text
              v-if="i.Status === 'pending' && userInfo.Permission === 'admin'"
              style="color: skyblue"
              @click="handle2Reply(i.FeedbackID)"
            >
              发布
            </text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts">
import { userStore } from '@/store'
import dayjs from 'dayjs'

import { Component, Vue } from 'vue-property-decorator'
import { getFeedBackApi, replyFeedBackApi } from './service'

interface IFeedbackItem {
  FeedbackID: string
  Type: 'suggestion' | 'issue'
  Contact: string
  Content: string
  images: string[]
  Status: string
  CreateTime: number
  ReplyContent?: string
  ReplyContents?: string
  ReplyID?: number
}

@Component({
  filters: {
    truncate(value: string, length: number) {
      if (!value) return ''
      return value.length > length ? value.substring(0, length) + '...' : value
    }
  }
})
export default class FeedBackHistory extends Vue {
  get userInfo(): any {
    return userStore.userInfo || {}
  }

  // 当前选中标签
  currentTab = 0
  tabList = [{ name: '全部' }, { name: '处理中' }, { name: '已处理' }]

  // 列表数据
  list: IFeedbackItem[] = []
  loadStatus: 'loadmore' | 'loading' | 'nomore' = 'loadmore'
  refreshing = false
  loading = false
  ReplyContent = ''
  mounted() {
    this.loadData()
  }

  async handle2Reply(FeedbackID: string) {
    uni.showLoading({ title: '提交中...' })
    await replyFeedBackApi({
      FeedbackID,
      ReplyContent: this.list.find((i: any) => i.FeedbackID === FeedbackID)
        ?.ReplyContents,
      ReplyID: this.userInfo.OfficerID
    })
    uni.hideLoading()
    this.loadData(true)
  }
  // 加载数据
  async loadData(reset = false) {
    this.loading = true
    if (reset) {
      this.loadStatus = 'loading'
    }

    try {
      const { records }: any = await getFeedBackApi({
        OfficerID:
          this.userInfo.Permission === 'admin' ? '' : this.userInfo.OfficerID
      })
      let filteredData = records
      // 根据标签筛选
      if (this.currentTab === 1) {
        filteredData = filteredData.filter(
          (item: any) => item.Status === 'pending'
        )
      } else if (this.currentTab === 2) {
        filteredData = filteredData.filter(
          (item: any) => item.Status === 'resolved'
        )
      }
      this.list = filteredData.map((i: IFeedbackItem) => {
        return {
          ...i,
          CreateTime: dayjs(i.CreateTime).format('YYYY-MM-DD HH:mm:ss'),
          Type: i.Type === 'suggestion' ? '建议反馈' : '问题反馈'
        }
      })
      this.loadStatus = 'nomore'
    } finally {
      this.loading = false
      this.refreshing = false
    }
  }

  // 下拉刷新
  refreshData() {
    this.refreshing = true
    this.loadData(true)
  }

  // 加载更多
  loadMore() {
    this.loadData()
  }

  // 切换标签
  handleTabChange({ index }: any) {
    this.currentTab = index
    this.loadData(true)
  }

  // 获取类型文本
  getTypeText(type: string) {
    const map: Record<string, string> = {
      suggestion: '功能建议',
      issue: '问题反馈'
    }
    return map[type] || '未知类型'
  }

  // 获取状态文本
  getStatusText(status: number) {
    return { resolved: '已处理', pending: '处理中' }[status] || '未知状态'
  }
}
</script>

<style lang="scss" scoped>
.history-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;

  .filter-bar {
    background-color: #fff;
    padding: 0 20rpx;
  }

  .list-container {
    flex: 1;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: inherit;
  }

  .content-preview {
    font-size: 26rpx;
    color: #666;
    margin-top: 10rpx;
  }

  .detail-popup {
    padding: 30rpx;

    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .detail-time {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 30rpx;
    }

    .detail-content {
      font-size: 28rpx;
      line-height: 1.6;
      margin-bottom: 40rpx;
    }

    .image-list {
      margin-bottom: 40rpx;

      .u-row {
        margin-top: 20rpx;
      }
    }

    .reply-section {
      margin-top: 40rpx;
      padding-top: 30rpx;
      border-top: 1px solid #eee;

      .reply-content {
        font-size: 26rpx;
        line-height: 1.6;
        margin: 20rpx 0;
      }

      .reply-time {
        font-size: 24rpx;
        color: #999;
        text-align: right;
      }
    }

    .popup-footer {
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
